<template>
  <div class="container">
    <div class="box1">
      <dv-border-box-8>
        <div class="box1_item">
            <PiewEcharts1/>
        </div>
      </dv-border-box-8>
      <dv-border-box-8>
        <div class="box1_item">
            <LinewEcharts1/>
        </div>
      </dv-border-box-8>
    </div>

    <div class="box2">
      <dv-border-box-8 class="mapbox">
        <div class="box2_item1">
            <ChinaCharts/>
        </div>
      </dv-border-box-8>
      <!-- <dv-border-box-8>
        <div class="box2_item2"></div>
      </dv-border-box-8> -->
    </div>

    <div class="box3">
      <dv-border-box-8>
        <div class="box3_item">
          <BarwEcharts1/>
        </div>
      </dv-border-box-8>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(25deg, #3f2264, #45518a, #3d80b2, #01b1dc);
  display: flex;
  .box1 {
    height: 100%;
    flex: 1;
    // background-color: #fff;
    display: flex;
    flex-direction: column;
    .box1_item{
        height: 100%;
    }
  }
  .box2 {
    height: 100%;
    flex: 2;
    // display: flex;
    // flex-direction: column;
    // .mapbox{
    //     height: 100%;
    // }
    .box2_item1{
        height: 100%;
        // background-color: #3d80b2;
        // background-color: #3d80b2;

    }
    // .box2_item2{
        // height: 100%;
        // background-color: #3d80b2;
        // background-color: #3d80b2;
    // }
  }
  .box3 {
    height: 100%;
    flex: 1;
    .box3_item{
        height: 100%;
        // background-color: #3d80b2;
    }
  }
}
</style>